<template>
  <div class="loginOut">
    <el-dialog
      title="用户注册"
      :visible="isShow"
      @close="closeEvent"
      width="50%"
    >
      <div>
        <el-form label-width="80px" :model="form" :rules="rules" ref="form">
          <div class="upload">
            <el-form-item label="头像" prop="avatar">
              <div class="up">
                <Upload v-model="form.avatar"></Upload>
              </div>
            </el-form-item>
          </div>
          <el-form-item prop="username" label="昵称">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item prop="code" label="图形码">
            <div class="isCode">
              <el-input v-model="form.code"></el-input>
              <div class="code">
                <img :src="codeUrl" @click="resrtCode" alt="" v-if="showCode" />
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="rcode" label="验证码">
            <div class="btn">
              <el-input v-model="form.rcode"></el-input>
              <button @click="sendCode">
                获取用户验证码
              </button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div style="text-align: center">
          <el-button @click="closeEvent">取消</el-button>
          <el-button @click="submit" type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Upload from './upLoad.vue'
import { sendsms, register } from '@/api/login.js'
export default {
  components: {
    Upload
  },
  data () {
    return {
      showCode: true,
      codeUrl: process.env.VUE_APP_BASE_API + '/captcha?type=sendsms',
      isOk: false,
      isShow: false,
      form: {
        username: '',
        phone: '',
        email: '',
        avatar: '',
        password: '',
        code: '',
        rcode: ''
      },
      rules: {
        username: [{ required: true, message: '必填', trigger: 'chaneg' }],
        phone: [
          { required: true, message: '必填', trigger: 'chaneg' },
          {
            validator: (rules, value, callback) => {
              const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              reg.test(value)
                ? callback()
                : callback(new Error('请输入正确的手机号！'))
            }
          }
        ],
        email: [
          { required: true, message: '必填', trigger: 'chaneg' },
          {
            validator: (rules, value, callback) => {
              const reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
              reg.test(value)
                ? callback()
                : callback(new Error('请输入正确的邮箱地址！'))
            }
          }
        ],
        password: [{ required: true, message: '必填', trigger: 'chaneg' }],
        rcode: [{ required: true, message: '必填', trigger: 'chaneg' }],
        avatar: [{ required: true, message: '必填', trigger: 'chaneg' }],
        code: [{ required: true, message: '必填', trigger: 'chaneg' }]
      }
    }
  },
  methods: {
    closeEvent () {
      this.isShow = false
    },
    // 注册账号
    submit () {
      this.$refs.form.validate(async result => {
        if (result) {
          console.log(this.form)
          const res = await register(this.form)
          // console.log(res)
          if (res.code === 200) {
            this.isShow = false
            this.$refs.form.resetFields()
            this.form = {
              username: '',
              phone: '',
              email: '',
              avatar: '',
              password: '',
              code: '',
              rcode: ''
            }

            this.$message.success('注册成功！')
          } else {
            this.$message.error(res.message)
          }
        } else {
          this.$message.success('注册失败！')
        }
      })
    },
    // 刷新验证码
    resrtCode () {
      this.showCode = false
      setTimeout(() => {
        this.showCode = true
      }, 0)
    },
    // 获取短信验证码
    async sendCode () {
      const res = await sendsms({
        code: this.form.code,
        phone: this.form.phone
      })
      console.log(res)
      this.form.rcode = res.data.captcha + ''
    }
  }
}
</script>

<style lang="less">
.loginOut {
  .el-dialog__body {
    padding: 0 35.35px;
  }
  .upload {
    width: 100%;
    display: flex;
    margin-bottom: 24px;
    .up {
      margin-left: 170px;
    }
  }
  .btn {
    display: flex;
    button {
      margin-left: 15px;
      width: 35%;
      background-color: #fff;
      border: 1px solid #ccc;
      cursor: pointer;
    }
  }
  .isCode {
    display: flex;
    .code {
      width: 35%;
      height: 42px;
      margin-left: 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
